var _hpic = document.getElementById("hpic");
var _hpicdiv = _hpic.getElementsByTagName("div");
var _hspan = document.getElementById("hspan");
var _hspandiv = _hspan.getElementsByTagName("span");

// 第一个动画的函数

 var timer = setInterval(function(){
    doItPerSecond();
},200)

function doItPerSecond() {
    demo = window.getComputedStyle(_hpic, null).marginLeft;  
    if (demo == "0px") {
        _hspandiv[0].style.background = "#fff";
        _hspandiv[1].style.background = "none";
    }

    else {
        _hspandiv[1].style.background = "#fff";
        _hspandiv[0].style.background = "none";
    }
}

// 写一个函数，用span控制动画

// 先写下面的函数
// 一个控制主页的函数
var _cm = document.getElementById("cm");
var _cmlis = _cm.getElementsByTagName("li");
var _first = document.getElementById("first");
var _last = document.getElementById("last");

for (var i = 0; i<2;i++) {
    (function (i) {
        _cmlis[i].onclick = function () {
            for (var j=0;j<2;j++) {
                _cmlis[j].className = "";
                _first.style.display = "none";
                _last.style.display = "none";
            }
            _cmlis[i].className = "active";
            if (i==0) {
                _first.style.display = "block";
            }
            else {
                _last.style.display = "block";
            }
        }
    }(i))
}

// 一个主页控制小分页面的函数
var _lone = document.getElementById("lone");
var _lonedivs = _lone.getElementsByTagName("div");
var _ltwo = document.getElementById("ltwo");
var _ltwodivs = _ltwo.getElementsByTagName("div");

for (var i = 0; i<8;i++) {
    (function (i) {
        _lonedivs[i].onclick = function () {
            for (var j=0;j<8;j++) {
                _lonedivs[j].className = "";
                _ltwodivs[j].style.display = "none";
            }
            _lonedivs[i].className = "eat";
            _ltwodivs[i].style.display = "block";
            
        }
    }(i))
}

// 写小页面中的小控制
// 这个有点小复杂，明天写吧

var _gghh = document.getElementById("gghh");
var _gghhdivs = _gghh.getElementsByTagName("span");
var _gghhbs = _gghh.getElementsByTagName("b");
var _gguu = document.getElementById("gguu");
var _gguudivs = _gguu.getElementsByTagName("ul");

for (var i = 0; i<_gghhdivs.length;i++) {
    (function (i) {
        _gghhdivs[i].onclick = function () {
            for (var j=0;j<_gghhdivs.length;j++) {
                _gghhdivs[j].className = "";
                _gguudivs[j].style.display = "none";
            }
            _gghhdivs[i].className = "gghhs";
            _gguudivs[i].style.display = "block";
            
        }

        _gghhbs[i].onclick = function () {
            for (var j=0;j<_gghhdivs.length;j++) {
                _gguudivs[j].style.display = "none";
                _gghhdivs[j].className = "";
            }
            _gguudivs[i].style.display = "block";
            _gghhdivs[i].className = "gghhs";
        }
    }(i))
}

// 第二个小控制，右边的
var _ggaa = document.getElementById("ggaa");
var _ggaadivs = _ggaa.getElementsByTagName("span");
var _ggaabs = _ggaa.getElementsByTagName("b");
var _ggbb = document.getElementById("ggbb");
var _ggbbdivs = _ggbb.getElementsByTagName("ul");

for (var i = 0; i<_ggaadivs.length;i++) {
    (function (i) {
        _ggaadivs[i].onclick = function () {
            for (var j=0;j<_ggaadivs.length;j++) {
                _ggaadivs[j].className = "";
                _ggbbdivs[j].style.display = "none";
            }
            _ggaadivs[i].className = "gghhs";
            _ggbbdivs[i].style.display = "block";
            
        }

        _ggaabs[i].onclick = function () {
            for (var j=0;j<_ggaadivs.length;j++) {
                _ggbbdivs[j].style.display = "none";
                _ggaadivs[j].className = "";
            }
            _ggbbdivs[i].style.display = "block";
            _ggaadivs[i].className = "gghhs";
        }
    }(i))
}